<!-- 编辑弹窗 -->
<template>
    <ele-modal
      width="740px"
      :visible="visible"
      :close-on-click-modal="true"
      custom-class="ele-dialog-form"
      :title="isUpdate ? '修改员工信息' : '添加员工信息'"
      @update:visible="updateVisible"
    >
    <el-form ref="form" :model="form" :rules="rules" label-width="100px" >
        <el-card  style="margin-top: -10px">
          <el-row :gutter="24">
            <el-col :md="24" :sm="24">
              <el-form-item label="员工姓名:"  prop="phone">
                <el-input v-model="form.name" placeholder="请输入员工姓名" >
                    <template slot="append">
                      <el-select v-model="form.sex"  placeholder="性别" style="width: 80px; " class="ele-block" clearable>
                        <el-option v-for="(item, index) in sexList" :key="index" :label="item.Value" :value="item.Key" />
                      </el-select></template>
                </el-input>
              </el-form-item>
            </el-col>
            <el-col :md="24" :sm="24">
              <el-form-item label="手机号码:" prop="phone" > 
                <el-input v-model="form.phone"  placeholder="请输入手机号码" clearable />
              </el-form-item>
            </el-col>
            <el-col :md="24" :sm="24">
              <el-form-item label="证件号码:">
                <el-input v-model="form.idNumber" placeholder="请输入证件号码" clearable />
              </el-form-item>
            </el-col>
            <el-col :md="24" :sm="24">
              <el-form-item label="所属岗位:">
                  <el-select v-model="form.postId"  style="width: 100%; " clearable >
                    <el-option v-for="(item, index) in dicts" :key="index" :label="item.name" :value="item.id" />
                  </el-select>
              </el-form-item>
            </el-col>
            <el-col :md="24" :sm="24">
              <el-form-item label="电子邮箱:">
                <el-input v-model="form.email" placeholder="请输入电子邮箱" clearable />
              </el-form-item>
            </el-col>
            <el-col :md="24" :sm="24">
                <el-form-item label="入职日期:">
                  <el-date-picker v-model="form.inPositionDate" type="date" placeholder="选择入职日期" format="yyyy 年 MM 月 dd 日" value-format="yyyy-MM-dd" clearable style="width:100%" />
                </el-form-item>
            </el-col>
            <el-col :md="24" :sm="24">
                <el-form-item label="离职日期:">
                  <el-date-picker v-model="form.outPositionDate" type="date" placeholder="选择离职日期" format="yyyy 年 MM 月 dd 日" value-format="yyyy-MM-dd" clearable style="width:100%"  />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="24">
            <el-col :md="24" :sm="24">
              <el-form-item label="描述:" >
                <el-input type="textarea" :rows="4" placeholder="请输入角色描述" v-model="form.remark" />
              </el-form-item>
            </el-col>
          </el-row>
        </el-card>
    </el-form>
    <div slot="footer">
      <el-button @click="updateVisible(false)">取消</el-button>
      <el-button type="primary" :loading="loading" @click="save" v-if="this.btnindex!='3'">
        保存
      </el-button>
    </div>
    </ele-modal>
  </template>
  
  <script>
    //初始化对像
    import { QuerySexEnum } from '@/api/enummanger';
    import upload from "@/components/UpLoad/index.js";
    import { AddPersonnel, UpdatePersonnel } from '@/api/usermanager/personnelmanager';
    import { QueryAllChildDictViewByCode } from '@/api/systemmanager/dictionarymanager';
    
    export default {
      name: 'PersonnelEdit',
      props: {
        // 弹窗是否打开
        visible: Boolean,
        // 修改回显的数据
        data: Object,
        //按钮索引
        btnindex:String,
        
      },
      mixins: [upload],
      data() {
        return {
          // 表单数据
          form: {},
          // 表单验证规则
          rules: {
            name: [{required: true,message: '请输入姓名',trigger: 'blur'}],
            phone: [{required: true,message: '请输入手机号码',trigger: 'blur'}]
          },
          // 提交状态
          loading: false,
          // 是否是修改
          isUpdate: false,
          //性别
          sexList:[],
          //字典
          dicts:[],
        };
      },
      created(){
        this.initData();
        this.querySexEnums();
       },
      methods: {
        //字典
        initData(){
          QueryAllChildDictViewByCode(this.Constant.J_GW).then((data)=>{
            this.dicts = [];
            this.dicts = data;
          });
        },
        //性别
       async querySexEnums(){
        let sysEnums = await QuerySexEnum();
          sysEnums.map(e=>{
            this.sexList.push({Key:e.Key,Value:e.Value});
          });
        },

        /* 保存编辑 */
        save() {
          //校验必填信息
          this.$refs['form'].validate((valid) => {
            if (!valid) {return false;}
  
            //日期时间
            this.loading = true;
            this.form.inPositionDate =  this.$util.toDateString(this.form.inPositionDate);
            this.form.outPositionDate =  this.$util.toDateString(this.form.outPositionDate);
  
  
            const saveOrUpdate = this.isUpdate ? UpdatePersonnel : AddPersonnel;
            saveOrUpdate(this.form)
              .then((msg) => {
                this.loading = false;
                this.$message.success(msg);
                this.updateVisible(false);
  
                //回调父组件方法
                this.$emit('done');
              })
              .catch((e) => {
                this.loading = false;
                this.$message.error(e.message);
              });
          });
        },
  
        /* 更新visible */
        updateVisible(value) {
          //更新父组件中的visible的值
          this.$emit('update:visible', value);
        },
  
      },
  
     
      /* 监听visible属性变化 */
      watch: {
        visible(visible) {
          if (visible) {
            if (this.data) {
              //赋值this.form
              this.form=this.data;
              this.isUpdate = this.isUpdate = this.data.id !=null && this.data.id !=undefined;
            } else {
              this.form={}
              this.isUpdate = false;
            }
          } else {
            //移除校验结果
            this.$refs['form'].clearValidate();
            this.form = {};
          }
        }
      }
    };
  </script>
  